<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
#div1{ width:312px; margin:50px auto; position:relative;}
.small{ width:310px; height:310px; border:1px solid #cdcdcd; overflow:hidden; left:0; top:0; position:absolute;}
.mark{ position:absolute; width:100%; height:100%; background:#ff0000; filter:alpha(opacity:0); opacity:0; z-index:2;cursor:move;}
.float1{ width:100px; height:100px; background:#fede4f; border:1px solid #aaa; filter:alpha(opacity:50);opacity:0.5; position:absolute;  display:none;}
.big{ width:310px; height:310px; border:1px solid #cdcdcd; overflow:hidden; position:absolute; left:320px; top:0; display:none;}
.big img{ position:absolute; left:0; top:0;}
#list{ width:288px; height:46px; overflow:hidden; position:absolute; left:10px; top:320px;}
#list ul{ position:absolute; left:0;}
#list li{ list-style:none; float:left; padding:4px; overflow:hidden; width:40px; height:40px;}
#list li img{ border:1px solid #cdcdcd;}
#list .active img{  border:1px solid #ff0000;}
#left{ width:10px; height:45px; display:block; background:url(images/left.gif) no-repeat; position:absolute; top:322px; left:0; cursor:pointer;}
#right{ width:10px; height:45px; display:block; background:url(images/right.gif) no-repeat; position:absolute; top:322px; left:300px; cursor:pointer;}
</style>

</head>

<body>
<div id="div1">
	<div class="small">
    	<span class="float1"></span>
    	<div class="mark"></div>
        <img src="images/m1.jpg" width="310" height="310" id='imgNode' />
    </div>
    <div class="big">
    	<img src="images/b1.jpg" />
    </div>
    <span id="left"></span>
    <span id="right"></span>
    <div id="list">
    	<ul>
        	<li class="active"><img src="images/s1.jpg" /></li>
        	<li><img src="images/s2.jpg" /></li>
        	<li><img src="images/s3.jpg" /></li>
            <li><img src="images/s4.jpg" /></li>
        	<li><img src="images/s5.jpg" /></li>
            <li><img src="images/s6.jpg" /></li>
            <li><img src="images/s7.jpg" /></li>
            <li><img src="images/s8.jpg" /></li>
        	<li><img src="images/s9.jpg" /></li>
            <li><img src="images/s10.jpg" /></li>
        </ul>
    </div>
</div> 
<script type="text/javascript">
    
    var allLi = list.children[0].children;
    var arr = [];

    for(var i = 0;i < allLi.length;i++){
        arr.push(allLi[i]);
    }


    right.onclick = function(){
        //console.log(arr);
      // arr.push(arr.shift());
       arr.unshift(arr.pop())
      // console.log(arr);
       list.children[0].innerHTML = '';
       for(var i = 0;i < arr.length;i++){
         list.children[0].appendChild(arr[i]);
       };

       for(var i = 0;i < allLi.length;i++){
            allLi[i].className = ''
       };
        allLi[0].className = 'active';
        setImg(allLi[0].children[0]);
    };

    function setImg(node){
        var iSrc = node.src;
        var iSrcLast =iSrc.substring(0,iSrc.lastIndexOf('s'));
        var iSrcNext = iSrc.substring(iSrc.lastIndexOf('s')+1);
        var lastImgSrc = iSrcLast + 'm' +iSrcNext;
        imgNode.src= lastImgSrc;
    };
    for(var i = 0;i < allLi.length;i++){
        allLi[i].onmouseover = function(){
            for(var i = 0;i < allLi.length;i++){
                allLi[i].className = '';
            }
            this.className = 'active';
            setImg(this.children[0])
            /*
            var iSrc = this.children[0].src;
            //alert(iSrc.lastIndexOf('s'));
            var iSrcLast =iSrc.substring(0,iSrc.lastIndexOf('s'));
            var iSrcNext = iSrc.substring(iSrc.lastIndexOf('s')+1);
            var lastImgSrc = iSrcLast + 'm' +iSrcNext;
         //    alert(lastImgSrc);
            imgNode.src= lastImgSrc;
            //alert(iSrc.indexOf('s',iSrc.lastIndexOf('s')-1))
            //alert(this.children[0].src);
            */
        }
    }

</script>
</body>
</html>
